<template>
  <div>
    <el-card class="mt-10">
      <el-form>
        <el-form-item label="属性名">
          <el-input
            placeholder="请输入属性名"
            class="arr-input"
            v-model="attrFormData.attrName"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="mt-10"
            @click="addAttrValue"
            :disabled="!attrFormData.attrName"
            >添加属性值</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-table class="mt-20" :data="attrFormData.attrValueList">
            <el-table-column label="序号" type="index" width="70" />
            <el-table-column label="属性值名称" class="arr-input">
              <template #default="{ row, $index }">
                <el-input
                  size="small"
                  ref="inputRef"
                  v-model="row.valueName"
                  @blur="switchShow(row, $index)"
                  @keyup.enter="switchShow(row, $index)"
                  v-if="row.isEdit"
                />
                <div v-else @click="switchEdit(row)">
                  {{ row.valueName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" type="index" width="570">
              <template #default="{ row, $index }">
                <span>
                  <el-tooltip content="真的要删除吗?">
                    <el-popconfirm
                      :title="`是否确认删除 ${row.valueName}?`"
                      @confirm="deleteAttr($index)"
                    >
                      <template #reference>
                        <el-button :icon="Delete" type="danger" />
                      </template>
                    </el-popconfirm>
                  </el-tooltip>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-row class="mt-10">
            <!-- 
          禁用效果
            1. 属性名有值 attrFormData.attrName
            2. 属性值列表中的属性值名称也要有值
              attrFormData.attrValueList.length > 0
              attrFormData.attrValueList.some(attrValue => attrValue.valueName)
         -->
            <el-button type="primary" :disabled="isBtnDisabled" @click="addAttr"
              >保存</el-button
            >
            <el-button type="danger" @click="isShowAttr">取消</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "LAddOrUpdate",
};
</script>

<script lang="ts" setup>
import { Delete } from "@element-plus/icons-vue";
import { reactive, ref, nextTick, computed } from "vue";
import { ElMessage } from "element-plus";
import type { AttrItem, AttrValueItem } from "@/api/product/model/attrmodel";
import { getAddAttrListApi } from "@/api/product/attr";
import { useCategoryStore } from "@/stores/category";
import { useAttrStore } from "@/stores/attr";
const emit = defineEmits(["setIsShowAttrList"]);
const categoryStore = useCategoryStore();
const attrStore = useAttrStore();
const attrFormData = reactive<AttrItem>({
  attrName: attrStore.attrName,
  attrValueList: attrStore.attrValueList,
});
const inputRef = ref();
const addAttrValue = () => {
  attrFormData.attrValueList.push({
    valueName: "",
    isEdit: true,
  });
  nextTick(() => {
    inputRef.value.focus();
  });
};
// 点击增加属性
const addAttr = async () => {
  await getAddAttrListApi({
    ...attrFormData,
    categoryId: categoryStore.category3Id as number,
    categoryLevel: 3,
    id: attrStore.id,
  });
  isShowAttr();
  ElMessage.success(`${attrStore.id ? "修改" : "添加"}属性成功`);
};
// 点击切换显示模式
const switchShow = (row: AttrValueItem, index: number) => {
  if (!row.valueName) {
    attrFormData.attrValueList.splice(index, 1);
  }
  row.isEdit = false;
};
// 点击切换编辑模式
const switchEdit = (row: AttrValueItem) => {
  row.isEdit = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};
// 删除一条
const deleteAttr = (index: number) => {
  attrFormData.attrValueList.splice(index, 1);
};
// 提交的禁用按钮
const isBtnDisabled = computed(() => {
  return (
    !attrFormData.attrName ||
    !attrFormData.attrValueList.some((attrValue) => attrValue.valueName)
  );
});
const isShowAttr = () => {
  emit("setIsShowAttrList", true);
};
</script>

<style scoped>
.arr-input {
  width: 400px;
}
</style>
